<template>
  <div>
    <div class="messagePage">
      <div class="messagePage-title"><span>编辑个人信息</span></div>
      <div class="messagePage-content">
        <div>
          <el-form label-width="80px" :model="form">
            <el-form-item label="昵称:">
              <el-input v-model="form.nickname" size="mini"></el-input>
            </el-form-item>
            <el-form-item label="介绍:">
              <el-input
                v-model="form.signature"
                type="textarea"
                row="6"
              ></el-input>
            </el-form-item>
            <el-form-item label="性别:">
              <el-radio-group v-model="form.gender">
                <el-radio :label="0">保密</el-radio>
                <el-radio :label="1">男</el-radio>
                <el-radio :label="2">女</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="生日:">
              <el-select
                v-model="value"
                placeholder="请选择"
                class="message-selectItem"
              >
                <el-option
                  :label="item.label"
                  :value="item.value"
                  v-for="(item, index) in options"
                  :key="index"
                >
                </el-option>
              </el-select>
              <el-select
                v-model="value02"
                placeholder="请选择"
                class="message-selectItem"
              >
                <el-option
                  :label="item.label"
                  :value="item.value"
                  v-for="item in options02"
                  :key="item.value"
                >
                </el-option>
              </el-select>
              <el-select v-model="value03" placeholder="请选择">
                <el-option
                  :label="item.label"
                  :value="item.value"
                  v-for="item in options03"
                  :key="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="地区:">
              <el-select
                v-model="value04"
                placeholder="请选择"
                class="message-selectItem"
              >
                <el-option label="江西省" value=""> </el-option>
              </el-select>
              <el-select
                v-model="value05"
                placeholder="请选择"
                class="message-selectItem"
              >
                <el-option label="鹰潭市" value=""> </el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button
                class="message-bootom-btn"
                type="danger"
                round
                @click="goSave"
                >保存</el-button
              >

              <el-button class="message-bootom-btn" round @click="goBack"
                >取消</el-button
              >
            </el-form-item>
          </el-form>
        </div>
        <div class="messagePage-upload">
          <img :src="avatarUrl" alt="" class="messagePage-upload-img" />
          <div class="messagePage-upload-Btn">
            <!-- ---------- -->
            <!-- <el-upload
              class="upload-demo"
              action="/api/avatar/upload?imgSize=200"
              :on-success="handleAvatarSuccess"
              multiple
            >
              <el-button size="small" type="primary">点击上传</el-button>
            </el-upload> -->
            <el-button round>修改头像</el-button>
            <!-- ================= -->
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "PersonalMessage",
  data() {
    return {
      form: {
        gender: "", //单选框的值
        nickname: "", //名称
        signature: "", //描述
        birthday: "", //生日
        city: 440300, //城市id
        province: 440000, //省份id
      },
      options: [
        { value: "1999", label: "1999年" },
        { value: "2000", label: "2000年" },
        { value: "2001", label: "2001年" },
        { value: "2002", label: "2002年" },
      ],
      options02: [
        { value: "1", label: "1月" },
        { value: "2", label: "2月" },
        { value: "3", label: "3月" },
        { value: "4", label: "4月" },
        { value: "5", label: "5月" },
        { value: "6", label: "6月" },
        { value: "7", label: "7月" },
        { value: "8", label: "8月" },
        { value: "9", label: "9月" },
        { value: "10", label: "10月" },
        { value: "11", label: "11月" },
        { value: "12", label: "12月" },
      ],
      options03: [
        { value: "1", label: "1日" },
        { value: "2", label: "2日" },
        { value: "3", label: "3日" },
        { value: "4", label: "4日" },
        { value: "5", label: "5日" },
        { value: "6", label: "6日" },
        { value: "7", label: "7日" },
        { value: "8", label: "8日" },
        { value: "9", label: "9日" },
        { value: "10", label: "10日" },
        { value: "11", label: "11日" },
        { value: "12", label: "12日" },
        { value: "13", label: "13日" },
        { value: "14", label: "14日" },
        { value: "15", label: "15日" },
        { value: "16", label: "16日" },
        { value: "17", label: "17日" },
        { value: "18", label: "18日" },
        { value: "19", label: "19日" },
        { value: "20", label: "20日" },
        { value: "21", label: "21日" },
        { value: "22", label: "22日" },
        { value: "23", label: "23日" },
        { value: "24", label: "24日" },
        { value: "25", label: "25日" },
        { value: "26", label: "26日" },
        { value: "27", label: "27日" },
        { value: "28", label: "28日" },
        { value: "29", label: "29日" },
        { value: "30", label: "30日" },
      ],
      // imageUrl: "../../static/images/mylove.jpg",
      value: "", //年分
      value02: "", //月份
      value03: "", //日
      value04: "",
      value05: "",
      avatarUrl: "", //用户头像
    };
  },
  methods: {
    goBack() {
      this.$router.history.go(-1);
    },
    async goSave() {
      //点击保存按钮保存更新数据
      let { value, value02, value03 } = this;
      if (+value02 < 10) {
        value02 = "0" + value02;
      }
      if (+value03 < 10) {
        value03 = "0" + value03;
      }
      let date = value + "-" + value02 + "-" + value03;
      let time = new Date(date);
      let time02 = time.getTime(); //拿到年月日转化的时间戳
      this.birthday = time02;
      //发送更新请求
      let { gender, signature, nickname, birthday, city, province } = this.form;
      await this.$API.personal.updateMessage({
        gender,
        nickname,
        signature,
        birthday,
        city,
        province,
      });
      //将数据更新到localStorage中
      let profile = JSON.parse(localStorage.getItem("profile"));

      localStorage.setItem(
        "profile",
        JSON.stringify({
          ...profile,
          nickname,
          gender,
          signature,
          birthday,
          city,
          province,
        })
      );
      console.log(profile);

      this.$router.history.push("/personal");
    },
    //upload
    handleAvatarSuccess(res, file) {
      console.log(file);
      this.imageUrl = URL.createObjectURL(file.raw);
    },
  },
  mounted() {
    //刚进入此页面，渲染初始数据
    let profile = JSON.parse(localStorage.getItem("profile"));
    this.form.gender = profile.gender;
    this.form.nickname = profile.nickname;
    this.form.signature = profile.signature;
    this.form.birthday = profile.birthday;
    this.avatarUrl = profile.avatarUrl;
    let year = this.$moment(profile.birthday).format("YYYY");
    let month = this.$moment(profile.birthday).format("MM");
    let day = this.$moment(profile.birthday).format("DD");
    this.value = "" + year + "年";
    this.value02 = "" + month + "月";
    this.value03 = "" + day + "日";
  },
};
</script>

<style scoped>
.messagePage {
  width: 1020px;
  /* height: 1000px; */
  padding-bottom: 100px;
  border-bottom: 1px solid #e0e0e0;
}
.messagePage-title {
  margin: 20px 30px;
  font-size: 22px;
  font-weight: bold;
}
.message-selectItem {
  margin-right: 15px;
}
.message-bootom-btn {
  margin-top: 30px;
}
.messagePage-upload-img {
  width: 160px;
  height: 160px;
  border-radius: 5px;
}
.messagePage-upload {
  padding: 0 100px;
  flex-shrink: 0;
}
.messagePage-content {
  display: flex;
}
.messagePage-upload-Btn {
  margin-top: 20px;
  text-align: center;
}
</style>